<template>
  <div class="inner-container" >
    <hr>
    <div class="section-title">基本信息</div>
    <hr>
    <!-- --------------------------------------------------详情表单-------------------------------------------------------- -->
    <el-form label-width="80px" label-position="left" :model="customerData">
      <el-row :gutter="10">
        <el-col :span="5" >
          <el-form-item label="客户编号" prop="id">
            <el-text>{{ customerData.id }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5" :model="ordersData">
          <el-form-item label="订单编号" prop="orderNumber">
            <el-text>{{ ordersData.orderNumber }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="客户状态" prop="status">
            <el-text v-if="customerData.status == 10">未订单客户—一客到店</el-text>
            <el-text v-else-if="customerData.status == 20" style="color:#FF9900;">未订单客户—二客到店</el-text>
            <el-text v-else-if="customerData.status == 30" style="color:#FF9900;">未订单客户—多客到店</el-text>
            <el-text v-else-if="customerData.status == 40" style="color:#FF9900;">订单客户—转单中</el-text>
            <el-text v-else-if="customerData.status == 50" style="color:#FF9900;">订单客户—已完成</el-text>
            <el-text v-else-if="customerData.status == 60" style="color:#FF9900;">订单客户—退/死单</el-text>
            <el-text v-else-if="customerData.status == 70" style="color:#FF9900;">待量房客户</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="客户类型" prop="type">
            <el-text v-if="customerData.type == 10">现房客户</el-text>
            <el-text v-else="customerData.type == 20">期房客户</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="客户姓名" prop="name">
            <el-text>{{ customerData.name }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="客户性别" prop="gender">
            <text v-if="customerData.gender == 1">男</text>
            <text v-else="customerData.gender==0">女</text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="年龄" prop="age">
            <el-text>{{ customerData.age }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-text>{{ customerData.contactPhone }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="身份证号" prop="idNumber">
            <el-text>{{ customerData.idNumber }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="紧急电话" prop="emergencyPhone">
            <el-text>{{ customerData.emergencyPhone }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="联系人" prop="emergencyContact">
            <el-text>{{ customerData.emergencyContact }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="楼盘名称" prop="propertyName">
            <el-text>{{ customerData.propertyName }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="户型" prop="houseType">
            <el-text>{{ customerData.houseType }}</el-text>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="面积" prop="houseSize">
            <el-text>{{ customerData.houseSize }}平方米</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form label-width="80px" label-position="left" :model="customerData" ref="formRef">
        <el-row>
          <el-col>
            <el-form-item label="楼盘名称" prop="city">
              <el-text style="width: 60px">{{ customerData.city }}</el-text>
              <el-text style="width: 70px">{{ customerData.district }}</el-text>
              <el-text>{{ customerData.propertyAddr }}</el-text>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-form>

    <hr>
    <div class="section-title">定金信息</div>
    <hr>
    <el-form label-width="80px" label-position="left" :model="DepositData">
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="录入时间" prop="collectionTime">
            <el-text>{{ DepositData.collectionTime }}</el-text>
            <el-text v-if="DepositData.collectionTime==null">待录入</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="定金金额" prop="depositAmount">
            <el-text v-if="DepositData.depositAmount==null">待录入</el-text>
            <el-text v-else>{{ DepositData.depositAmount }}元</el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="付款方式" prop="paymentMethod">
            <text v-if="DepositData.paymentMethod == 10">微信</text>
            <text v-else-if="DepositData.paymentMethod==20">支付宝</text>
            <text v-else-if="DepositData.paymentMethod==30">银行卡/信用卡</text>
            <text v-else-if="DepositData.paymentMethod==40">先现金</text>
            <text v-else="customerData.paymentMethod==null">待录入</text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="付款凭证" prop="paymentVoucher" >
            <el-text v-if="DepositData.paymentVoucher==null">待录入</el-text>
            <el-text v-else ><img :src="DepositData.paymentVoucher" style="width: 130px; height: 100px"></el-text>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="5">
          <el-form-item label="录入人" prop="recipient">
            <el-text v-if="DepositData.recipient==null">待录入</el-text>
            <el-text v-else>{{ DepositData.recipient }}</el-text>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script setup>

import {computed, onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import request from "@/utils/request";

const router = useRouter();


//客户表
const customerData = ref({
  id:undefined,
  type:undefined,
  name:undefined,
  gender:undefined,
  age:undefined,
  contactPhone:undefined,
  idNumber:undefined,
  emergencyPhone:undefined,
  emergencyContact:undefined,
  propertyName:undefined,
  houseType:undefined,
  houseSize:undefined,
  province:undefined,
  city:undefined,
  district:undefined,
  propertyAddr:undefined,
  status:undefined,

})


const id = new URLSearchParams(window.location.search).get('id');
//进入页面回显数据
const selectCustomer = () => {
  request.get('/api/crm/deposit/selectById/'+id).then((res) => {
    customerData.value = res.data;
    console.log(res.data);
  })
}

const DepositData = ref([]);


const selectDepositById =()=>{
  request.get('/api/crm/deposit/selectDepositById/'+id).then((res)=>{
    DepositData.value=res.data;
    console.log(res.data);
  })
}
const ordersData = ref({
  orderNumber:undefined,
})

const tableOrdersData = () => {
  let did = DepositData.value;
  console.log("数据DepositId:",did);
  request.get('/api/crm/deposit/selectOrdersById/'+ id).then((res) => {
    ordersData.value = res.data;
    console.log(res.data);
  })
}
onMounted(() => {
  selectCustomer();
  selectDepositById();
  tableOrdersData();
})

</script>


<style scoped>

</style>